<template>
  <div class="hello">
    <h1>数据展示</h1>
    <el-button @click="login()">登录</el-button>
    <el-card>
      <el-table
        :data="
          tableData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          )
        "
        style="width: 100%"
      >
        <el-table-column prop="pattern_name" label="策略名称" width="180">
          <template slot-scope="scope">
            {{ scope.row.pattern_name }}
          </template>
        </el-table-column>
        <el-table-column prop="period_type" label="策略周期" width="180">
          <template slot-scope="scope">
            {{ scope.row.period_type }}
          </template>
        </el-table-column>
        <el-table-column prop="trans_no" label="序号" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.trans_no }}
          </template>
        </el-table-column>
        <el-table-column prop="exchange" label="交易所" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.exchange }}
          </template>
        </el-table-column>
        <el-table-column prop="symbol" label="证券代码" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.symbol }}
          </template>
        </el-table-column>
        <el-table-column prop="open_order_no" label="开仓委托序号" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.order_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_order_price"
          label="开仓委托价格"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.order_price }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_order_volume"
          label="开仓委托数量"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.order_volume }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_order_time"
          label="开仓委托时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.order_time }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_executed_no"
          label="开仓成交序号"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.executed_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_executed_price"
          label="开仓成交价格"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.executed_price }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_executed_volume"
          label="开仓成交数量"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.executed_volume }}
          </template>
        </el-table-column>
        <el-table-column prop="open_method" label="开仓委托方式" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.method }}
          </template>
        </el-table-column>
        <el-table-column
          prop="open_executed_time"
          label="开仓成交时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.executed_time }}
          </template>
        </el-table-column>
        <el-table-column prop="close_order_no" label="平仓委托序号" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.open_order.order_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_order_price"
          label="平仓委托价格"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.order_price }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_order_volume"
          label="平仓委托数量"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.order_volume }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_order_time"
          label="平仓委托时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.order_time }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_executed_no"
          label="平仓成交序号"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.executed_no }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_executed_price"
          label="平仓成交价格"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.executed_price }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_executed_volume"
          label="平仓成交数量"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.executed_volume }}
          </template>
        </el-table-column>
        <el-table-column prop="close_method" label="平仓委托方式" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.method }}
          </template>
        </el-table-column>
        <el-table-column
          prop="close_executed_time"
          label="平仓成交时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.transaction.close_order.executed_time }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="委托状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column prop="profit_percent" label="浮动盈亏" width="180">
          <template slot-scope="scope">
            {{ scope.row.transaction.profit_percent }}
          </template>
        </el-table-column>
        <el-table-column
          prop="high_or_low_price_since_open"
          label="暂不展示"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.high_or_low_price_since_open }}
          </template>
        </el-table-column>
        <el-table-column prop="stop_type" label="平仓方式" width="180">
          <template slot-scope="scope">
            {{ scope.row.stop_type }}
          </template>
        </el-table-column>
        <el-table-column
          prop="stop_profit_value"
          label="目标盈利价"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.stop_profit_value }}
          </template>
        </el-table-column>
        <el-table-column prop="stop_loss_value" label="目标止损价" width="180">
          <template slot-scope="scope">
            {{ scope.row.stop_loss_value }}
          </template>
        </el-table-column>
        <el-table-column prop="trans_plan" label="暂不展示" width="180">
          <template slot-scope="scope">
            {{ scope.row.trans_plan }}
          </template>
        </el-table-column>
        <el-table-column prop="signal_push_type" label="暂不展示" width="180">
          <template slot-scope="scope">
            {{ scope.row.signal_push_type }}
          </template>
        </el-table-column>
        <el-table-column prop="gw_type" label="暂不展示" width="180">
          <template slot-scope="scope">
            {{ scope.row.gw_type }}
          </template>
        </el-table-column>
        <el-table-column prop="trigger_method" label="暂不展示" width="180">
          <template slot-scope="scope">
            {{ scope.row.trigger_method }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// import { encode, decode } from '@/assets/js/base64.js'
import { createSocket } from '../assets/js/websocket.js'
export default {
  data() {
    return {
      //    分页
      currentPage: 1,
      pagesize: 5,
      total: 5
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data
    }
  },
  methods: {
    login() {
      createSocket('ws://175.27.243.236:6060/test')
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>
<style scoped></style>
